<!DOCTYPE html>
<html>
<head>
    <title>QCloud COS SDK V4</title>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />

    <link href="./bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./docs.min.css">
    <script src="./jquery-3.2.1.min.js"></script>
    <script src="./crypto.js"></script>
    <script type="text/javascript" src="../src/qcloud_sdk.js"></script>

    <script type="text/javascript">
        $(function () {

            //TODO 以下几个值请确保填上再调用示例里的sdk方法
            //具体可以到https://console.qcloud.com/cos 进行查看
            var bucket = 'txzapp';
            var appid = '10052192';
            var sid = 'AKID0zLb467fRifqb0rsyo5tVJKZqKiebe5B';
            var skey = 'UcfDJpkyGi90IDw0YsnxxUcLkWopbrC6';
            var region = 'sh';
            //TODO 以上几个值请确保填上再调用示例里的sdk方法

            var myFolder = '/test/test/test';//需要操作的目录

            //初始化逻辑
            //特别注意: JS-SDK使用之前请先到console.qcloud.com/cos 对相应的Bucket进行跨域设置
            var cos = new CosCloud({
                appid: appid, // APPID 必填参数
                bucket: bucket, // bucketName 必填参数
                region: region, // 地域信息 必填参数 华南地区填gz 华东填sh 华北填tj
                getAppSign: function (callback) {//获取签名 必填参数

                    // 方法一（推荐线上使用）：搭建鉴权服务器，构造请求参数获取签名，推荐实际线上业务使用，优点是安全性好，不会暴露自己的私钥
                    // $.get('../server/auth.php', callback);

                    // 方法二（前端调试使用）：直接在浏览器前端计算签名，需要获取自己的accessKey和secretKey, 一般在调试阶段使用
                    var self = this;
                    var random = parseInt(Math.random() * Math.pow(2, 32));
                    var now = parseInt(Date.now() / 1000);
                    var e = now + 600; //签名过期时间为当前+600s
                    var path = ''; //多次签名这里填空
                    var str = 'a=' + self.appid + '&k=' + sid + '&e=' + e + '&t=' + now + '&r=' + random + '&f=' + path + '&b=' + self.bucket;
                    var sha1Res = CryptoJS.HmacSHA1(str, skey); // 这里使用CryptoJS计算sha1值，你也可以用其他开源库或自己实现
                    var strWordArray = CryptoJS.enc.Utf8.parse(str);
                    var resWordArray = sha1Res.concat(strWordArray);
                    var res = resWordArray.toString(CryptoJS.enc.Base64);

                    callback(res);

                },
                getAppSignOnce: function (callback) {//单次签名，参考上面的注释即可

                    // 方法一（推荐线上使用）：搭建鉴权服务器，构造请求参数获取签名，推荐实际线上业务使用，优点是安全性好，不会暴露自己的私钥
                    // $.get('../server/auth.php', {path: self.path}, callback);

                    // 方法二（前端调试使用）：直接在浏览器前端计算签名，需要获取自己的accessKey和secretKey, 一般在调试阶段使用
                    var self = this;
                    var random = parseInt(Math.random() * Math.pow(2, 32));
                    var now = parseInt(Date.now() / 1000);
                    var e = 0; // 单次签名 expire==0
                    var path = self.path;
                    var str = 'a=' + self.appid + '&k=' + sid + '&e=' + e + '&t=' + now + '&r=' + random + '&f=' + path + '&b=' + self.bucket;
                    var sha1Res = CryptoJS.HmacSHA1(str, skey); // 这里使用CryptoJS计算sha1值，你也可以用其他开源库或自己实现
                    var strWordArray = CryptoJS.enc.Utf8.parse(str);
                    var resWordArray = sha1Res.concat(strWordArray);
                    var res = resWordArray.toString(CryptoJS.enc.Base64);

                    callback(res);

                }
            });

            var successCallBack = function (result) {
                console.log('request success.');
                $("#result").val(JSON.stringify(result));
            };

            var errorCallBack = function (result) {
                result = result || {};
                console.log('request error:', result && result.message);
                $("#result").val(result.responseText || 'error');
            };

            var progressCallBack = function (curr, sha1) {
                var sha1CheckProgress = ((sha1 * 100).toFixed(2) || 100) + '%';
                var uploadProgress = ((curr || 0) * 100).toFixed(2) + '%';
                var msg = 'upload progress:' + uploadProgress + '; sha1 check:' + sha1CheckProgress + '.';
                console.log(msg);
                $("#result").val(msg);
            };

            var lastTaskId;
            var taskReady = function (taskId) {
                lastTaskId = taskId;
            };

            //上传文件,适合小于20M的文件上传
            $('#uploadFile').on('click', function () {
                $('#js-file').off('change').on('change', function (e) {
                    var file = e.target.files[0];
                    // 分片上传过程可能会有 op=upload_slice_list 的 POST 请求返回 404，不会影响上传：https://github.com/tencentyun/cos-js-sdk-v4/issues/16
                    cos.uploadFile(successCallBack, errorCallBack, progressCallBack, bucket, myFolder + file.name, file, 0, taskReady);//insertOnly==0 表示允许覆盖文件 1表示不允许
                    $('#form')[0].reset();
                    return false;
                });

                setTimeout(function () {
                    $('#js-file').click();
                }, 0);

                return false;
            });


            //分片上传文件,当选择大于20M大小的文件的时候用分片上传
            var taskId = 0;
            $('#sliceUploadFile').on('click', function () {


                $('#js-file').off('change').on('change', function (e) {
                    var file = e.target.files[0];
                    // 分片上传直接调用uploadFile方法，内部会判断是否需要分片
                    // 分片上传过程可能会有 op=upload_slice_list 的 POST 请求返回 404，不会影响上传：https://github.com/tencentyun/cos-js-sdk-v4/issues/16
                    taskId = cos.uploadFile(successCallBack, errorCallBack, progressCallBack, bucket, myFolder + file.name, file, 0, taskReady);//insertOnly==0 表示允许覆盖文件 1表示不允许

                    //分片上传也可以直接调用sliceUploadFile方法，分片大小设置暂定不超过1M
                    //cos.sliceUploadFile(successCallBack, errorCallBack, progressCallBack, bucket, myFolder + file.name, file, 0, 1024*1024);

                    $('#form')[0].reset();
                    return false;
                });

                setTimeout(function () {
                    $('#js-file').click();
                }, 0);

                return false;
            });


            //创建文件夹
            $('#createFolder').on('click', function () {
                var newFolder = '/333/';//填你需要创建的文件夹，记得用斜杠包一下
                cos.createFolder(successCallBack, errorCallBack, bucket, newFolder);
            });

            //删除文件夹
            $('#deleteFolder').on('click', function () {
                var newFolder = '/333/';//填你需要删除的文件夹，记得用斜杠包一下
                cos.deleteFolder(successCallBack, errorCallBack, bucket, newFolder);
            });

            //获取指定文件夹内的列表,默认每次返回20条
            $('#getFolderList').on('click', function () {
                cos.getFolderList(successCallBack, errorCallBack, bucket, myFolder);
            });

            //获取文件夹属性
            $('#getFolderStat').on('click', function () {
                debugger
                cos.getFolderStat(successCallBack, errorCallBack, bucket, '/333');
            });

            //更新文件夹属性
            $('#updateFolder').on('click', function () {
                cos.updateFolder(successCallBack, errorCallBack, bucket, '/333/', 'authority');
            });


            //删除文件
            $('#deleteFile').on('click', function () {
                var myFile = myFolder + '2.txt';//填你自己实际存在的文件
                cos.deleteFile(successCallBack, errorCallBack, bucket, myFile);
            });

            //获取文件属性
            $('#getFileStat').on('click', function () {
                var myFile = myFolder + '2.txt';//填你自己实际存在的文件
                cos.getFileStat(successCallBack, errorCallBack, bucket, myFile);
            });

            //更新文件属性
            $('#updateFile').on('click', function () {
                var myFile = myFolder + '2.txt';//填你自己实际存在的文件
                cos.updateFile(successCallBack, errorCallBack, bucket, myFile, 'my new file attr');
            });

            //拷贝文件，从源文件地址复制一份到新地址
            $('#copyFile').on('click', function () {

                var myFile = '111/2.txt';//填你自己实际存在的文件

                //注意一下目标的路径，这里如果填333/2.txt 则表示文件复制到111/333/2.txt
                //如果填/333/2.txt 则表示文件复制到bucket根目录下的333/2.txt
                var newFile = '/333/2.txt';
                var overWrite = 1;//0 表示不覆盖 1表示覆盖
                cos.copyFile(successCallBack, errorCallBack, bucket, myFile, newFile, overWrite);
            });

            //移动文件，把源文件移动到新地址，如果是同一个目录移动且文件名不同的话，相当于改了一个文件名
            //如果是移动到新目录，相当于剪切当前的文件，粘贴到了新目录
            $('#moveFile').on('click', function () {

                var myFile = '/111/2.txt';//填你自己实际存在的文件

                //注意一下目标的路径，这里如果填333/2.txt 则表示文件移动到111/333/2.txt
                //如果填/333/2.txt 则表示文件移动到bucket根目录下的333/2.txt
                //如果填/111/3.txt 则相当于把2.txt改名成3.txt
                var newFile = '/333/2.txt';
                var overWrite = 1;//0 表示不覆盖 1表示覆盖
                cos.moveFile(successCallBack, errorCallBack, bucket, myFile, newFile, overWrite);
            });

            $('#cancelTask').on('click', function () {
                cos.cancelTask(lastTaskId);
            });

        });
    </script>
</head>
<body>
<div class="bs-docs-header" id="content">
    <div class="container">
        <h1>腾讯云COS js-sdk-v4</h1>
    </div>
</div>
<div class="container bs-docs-container">
    <form id="form">
        <input id="js-file" type="file" style="display:none;"/>
    </form>

    <div class="row" style="padding:20px;">
        <div class="col-md-2"><a id="updateFolder" href="javascript:void(0);" class="btn btn-lg btn-outline">updateFolder</a></div>
        <div class="col-md-2"><a id="updateFile" href="javascript:void(0);" class="btn btn-lg btn-outline">updateFile</a></div>
        <div class="col-md-2"><a id="deleteFolder" href="javascript:void(0);" class="btn btn-lg btn-outline">deleteFolder</a></div>
        <div class="col-md-2"><a id="deleteFile" href="javascript:void(0);" class="btn btn-lg btn-outline">deleteFile</a></div>
    </div>
    <div class="row" style="padding:20px;">
        <div class="col-md-2"><a id="getFolderStat" href="javascript:void(0);" class="btn btn-lg btn-outline">getFolderStat</a></div>
        <div class="col-md-2"><a id="getFileStat" href="javascript:void(0);" class="btn btn-lg btn-outline">getFileStat</a></div>
        <div class="col-md-2"><a id="createFolder" href="javascript:void(0);" class="btn btn-lg btn-outline">createFolder</a></div>
        <div class="col-md-2"><a id="getFolderList" href="javascript:void(0);" class="btn btn-lg btn-outline">getFolderList</a></div>
    </div>
    <div class="row" style="padding:20px;">
        <div class="col-md-2"><a id="copyFile" href="javascript:void(0);" class="btn btn-lg btn-outline">copyFile</a></div>
        <div class="col-md-2"><a id="moveFile" href="javascript:void(0);" class="btn btn-lg btn-outline">moveFile</a></div>
        <div class="col-md-2"><a id="uploadFile" href="javascript:void(0);" class="btn btn-lg btn-outline">uploadFile</a></div>
        <div class="col-md-2"><a id="sliceUploadFile" href="javascript:void(0);" class="btn btn-lg btn-outline">sliceUploadFile</a></div>
        <div class="col-md-2"><a id="cancelTask" href="javascript:void(0);" class="btn btn-lg btn-outline">cancelTask</a></div>
    </div>
    <div class="row" style="padding:20px;">
        <textarea id="result" rows="20" cols="100">1.使用js-sdk前请记得到console.qcloud.com/cos 找到对应的bucket进行跨域设置;
2.请您修改本页面里的部分代码，把appid,bucket,region,secretId,secretKey填上，确保正确后再运行示例里的代码;
3.本程序仅用于示例，所以在浏览器端暴露了secretId和secretKey直接计算签名，实际的线上业务请您自己部署获取签名的服务以确保自己的密钥和业务安全        </textarea>
    </div>
</div>
</body>
</html>